<!-- 创建时间: 2020年12月23日 Wednesday 09:13 -->
<template>
    <div class='teacher_container'>
        <el-row class="menu">
            <el-col :xs="6" :sm="6" :md="5">
                <el-tag>欢迎 {{userName}} 教师，登录小花考试</el-tag>
                <br>
                <el-tag>教师工号: {{userNumber}}</el-tag>
                <el-link type="info" @click.prevent="outLogin()"><i class="fa fa-power-off"></i>退出</el-link>
            </el-col>
            <el-col :sm="6" :md="6" v-if="flag">
                <el-card shadow="hover" class="createCoursesClass" @click.native="createCoursesClass(1)">
                    考试课程
                </el-card>
            </el-col>
            <el-col :sm="6" :md="6" v-if="flag">
                <el-card shadow="hover" class="createCoursesClass" @click.native="createCoursesClass(2)">
                    创建考试课程
                </el-card>
            </el-col>
        </el-row>
        <transition mode="out-in" name="el-fade-in" v-if="flag">
            <router-view></router-view>
        </transition>
       <subComp v-if="!flag" :msg="teacherInfo"></subComp>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import updatepass from '../student/personalCenter.vue'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        subComp:updatepass
    },
    data() {
        //这里存放数据
        return {
            currentPath: this.$route.path, // 当前路由
            userName: "", // 教师姓名
            userNumber: "", // 教师工号
            flag: JSON.parse(sessionStorage.getItem("flag")),
            teacherInfo:'teacher',
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        $route(to, form) {
            this.currentPath = to.fullPath;
        }
    },
    //方法集合
    methods: {
        createCoursesClass(num) {
            if (num == 1 && this.currentPath != '/teacher/coursesClass') {
                this.$router.push("/teacher/coursesClass");
            } else if (num == 2 && this.currentPath != '/teacher/createCoursesClass') {
                this.$router.push("/teacher/createCoursesClass");
            }
        },
        autoGetUserInfo() {
            this.userName = this.$store.getters.getUserName
            this.userNumber = this.$store.getters.getUserNumber
        },
        outLogin() {
            this.$http.get("logOut",{params:{"userNumber":this.$store.getters.getUserNumber}});
            sessionStorage.removeItem(this.$store.getters.getUserNumber);
            window.clearVuexAlong(true, false);
            this.$store.commit("setAddQuestions", "");
            this.$store.commit("setQuestionsList", []);
            this.$store.commit("setUserName", "");
            this.$store.commit("setUserNumber", "");
            this.$router.push("/");
        },
        
    },

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.autoGetUserInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    //当data中定义的数据有变化时就会加载updated方法
    updated() {},
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.teacher_container {
    .menu {
        padding: 10px 10px 0px 10px;
        user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        .createCoursesClass {
            text-align: center;
            cursor: pointer;
            background: #aeeef1 !important;
            color: tomato;
            font-weight: bold;
            letter-spacing: 5px; // 字间距
        }
        .createCoursesClass:hover {
            border: 1px solid sandybrown;
        }
    }
}
</style>